<template>
  <div class="shop-management">
    <el-card class="shop-form">
      <el-form :model="shopForm" label-width="120px">
        <el-form-item label="店铺名称">
          <el-input v-model="shopForm.name" placeholder="请输入店铺名称" />
        </el-form-item>
        
        <el-form-item label="店铺公告">
          <el-input 
            v-model="shopForm.bulletin" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入店铺公告" 
          />
        </el-form-item>
        
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            :action=" 'api/shop/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="shopForm.avatar" :src="serverUrl + shopForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="商品图片" prop="pics">
          <el-upload
          v-model:file-list="fileList"
          :action="'api/shop/upload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        </el-form-item>
        
        <el-form-item label="起送价格">
          <el-input v-model="shopForm.minPrice" type="number" />
        </el-form-item>
        
        <el-form-item label="送达时间">
          <el-input v-model="shopForm.deliveryTime" placeholder="例如：30分钟" />
        </el-form-item>
        
        <el-form-item label="配送备注">
          <el-input 
            v-model="shopForm.description" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入配送备注" 
          />
        </el-form-item>
        
        <el-form-item label="店铺好评率">
          <el-input v-model="shopForm.score" />
        </el-form-item>
        
        <el-form-item label="店铺销量">
          <el-input v-model="shopForm.sellCount" type="number" />
        </el-form-item>
        
        <el-form-item label="店铺活动">
          <el-checkbox-group v-model="shopForm.supports">
            <el-checkbox value="单人精彩套餐" name="type">
              单人精彩套餐
            </el-checkbox>
            <el-checkbox value="VC无限橙果汁全场8折" name="type">
              VC无限橙果汁全场8折
            </el-checkbox>
            <el-checkbox value="在线支付满28减5" name="type">
              在线支付满28减5
            </el-checkbox>
            <el-checkbox value="特价饮品八折抢购" name="type">
              特价饮品八折抢购
            </el-checkbox>
            <el-checkbox value="中秋特惠" name="type">
              中秋特惠
            </el-checkbox>
            <el-checkbox value="国庆特价" name="type">
              国庆特价
            </el-checkbox> 
            <el-checkbox value="春节1折折扣" name="type">
              春节1折折扣
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="营业时间" style="width: 450px;">
          <el-time-picker
            v-model="shopForm.date"
            is-range
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择营业时间"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <el-dialog v-model="dialogVisible">
    <img w-full class="dialog-img" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

</template>

<script setup>
import { ref } from 'vue';
import { shopInfo, editShopInfo } from '@/api/account';
import { serverUrl } from '@/utils/common';
import { ElMessage } from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';

// 店铺表单数据
const shopForm = ref({
  id: '',
  name: '',
  bulletin: '',
  avatar: '',
  pics: [],
  minPrice: '',
  deliveryTime: '',
  description: '',
  score: '',
  sellCount: '',
  supports: [],
  date: ''
});

// 店铺多图
const fileList = ref([]);
// 预览图片的弹窗
const dialogVisible = ref(false);
// 预览图片的路径
const dialogImageUrl = ref('');

const getShopInfo = async () => {
  const res = await shopInfo();
  shopForm.value = res.data;
  fileList.value = res.data.pics.map((item) => {
    return { name: item, url: serverUrl + item };
  });
};

getShopInfo();

const submitForm = async () => {
  const formData = { ...shopForm.value };
  formData.date = JSON.stringify(formData.date);
  formData.supports = JSON.stringify(formData.supports);
  formData.avatar = formData.avatar.slice(formData.avatar.lastIndexOf('/') + 1);
  const pics = fileList.value.map((item) => {
    let filename = item.name;
    if (item.response) {
      filename = item.response.imgUrl;
    }
    let index = filename.lastIndexOf('/');
    return filename.slice(index + 1);
  });
  formData.pics = JSON.stringify(pics);

  const { code, msg } = await editShopInfo(formData);
  if (code === 0) {
    ElMessage.success(msg);
    getShopInfo(); // 刷新页面
  } else {
    ElMessage.error(msg);
  }
};

const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('店铺头像必须是图片');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  return true;
};

const handlePictureCardPreview = (res) => {
  dialogImageUrl.value = res.url;
  dialogVisible.value = true;
};

const handleRemove = (res) => {
  console.log(res);
};

const handleAvatarSuccess = (res) => {
  shopForm.value.avatar = res.imgUrl;
};

// const handleProductImgSuccess = (res, file) => {
//   file.url = res.imgUrl; // 更新文件列表中的图片地址
// };
</script>

<style scoped>
.shop-form {
  max-width: 900px;
  margin: 0 auto;
}
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.unit {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}
.avatar{
  width: 178px;
  height: 178px;
}
.dialog-img{
  width: 100%;
}
:deep(.avatar[data-v-d00e31f8] )
{
  width:100%;
  height: 95px;
}
</style>